<template>
  <div :data="userInfoData">
    <TitleContainer spot="基本信息" />
    <el-row :gutter="20">
      <el-col :span="8">
        <div class="item">
          <span class="item-label">ID：</span>
          <span class="item-value">{{ userInfoData.individual_id }}</span>
        </div>
        <div class="item">
          <span class="item-label">年龄：</span>
          <span class="item-value">{{ userInfoData.age }}</span>
        </div>
        <div class="item">
          <span class="item-label">身份证：</span>
          <span class="item-value">{{ userInfoData.individual_identity }}</span>
        </div>
      </el-col>
      <el-col :span="8">
        <div class="item">
          <span class="item-label">姓名：</span>
          <span class="item-value">{{ userInfoData.individual_name }}</span>
        </div>
        <div class="item">
          <span class="item-label">生日：</span>
          <span class="item-value">{{ userInfoData.birthday }}</span>
        </div>
        <div class="item">
          <span class="item-label">联系电话：</span>
          <span class="item-value">{{ userInfoData.individual_mobile }}</span>
        </div>
      </el-col>
      <el-col :span="8">
        <div class="item">
          <span class="item-label">性别：</span>
          <span class="item-value">{{
            userInfoData.individual_gender_str
          }}</span>
        </div>
        <div class="item">
          <span class="item-label">注册时间：</span>
          <span class="item-value">{{ userInfoData.reg_date }}</span>
        </div>
      </el-col>
    </el-row>
    <!-- <h3 class="h3title">详细信息</h3> -->
    <TitleContainer spot="详细信息" />
    <div class="userInfo-container">
      <div class="row">
        <span class="fl row-label">位置情况</span>
        <div class="row-value">
          <el-row :gutter="20">
            <el-col :span="24">
              <div class="item">
                <span class="item-label">最近一次LBS：</span>
                <span class="item-value">{{
                  userInfoData.individual_extend_lbs
                }}</span>
              </div>
              <div class="item">
                <span class="item-label">最近一次登录IP：</span>
                <span class="item-value">{{
                  userInfoData.oauth_user_extend_ip
                }}</span>
              </div>
            </el-col>
          </el-row>
        </div>
      </div>
      <div class="row">
        <div class="fl row-label">联系人</div>
        <div class="row-value">
          <el-table
            :data="tableData"
            stripe
            fit
            highlight-current-row
            style="width: 100%"
          >
            <el-table-column
              label="序号"
              type="index"
              align="center"
              width="50"
            ></el-table-column>
            <el-table-column
              label="姓名"
              prop="individual_contact_name"
              align="center"
            ></el-table-column>
            <el-table-column
              label="关系"
              prop="individual_contact_type_str"
              align="center"
            ></el-table-column>
            <el-table-column
              label="联系电话"
              prop="individual_contact_phone"
              align="center"
            ></el-table-column>
            <!-- <el-table-column label="身份证" prop="" align="left"></el-table-column>
                        <el-table-column label="居住地" prop="" align="left"></el-table-column> -->
          </el-table>
        </div>
      </div>
    </div>
  </div>
</template>

<script lang="ts">
import { Component, Vue, Prop, Watch } from 'vue-property-decorator'
import TitleContainer from '@/components/title/TitleContainer.vue'

// import { formatTime, shortcutsOptions } from 'utils'
@Component({
  name: 'CustomTabs',
  components: {
    TitleContainer
    //引用的组件在这里声明
  }
})
export default class extends Vue {
  private userInfoData = {}
  private tableData = []
  private activeName = 'first'
  private tableLoading = true
  mounted() {
    this.getUserInfo()
  }
  //获取用户信息
  getUserInfo() {
    this.tableLoading = true
    // this.$api.userReport.info
    //   .userInfo({
    //     params: {
    //       id: this.$route.query.uid,
    //       apply_code: this.$route.query.apply_code
    //     }
    //   })
    //   .then(response => {
    //     this.userInfoData = response.data.data
    //     this.tableData = this.userInfoData.individual_contacts
    //     console.log(this.userInfoData)
    //     this.tableLoading = false
    //   })
    //   .catch(error => {
    //     this.tableLoading = false
    //     this.$message.error(error)
    //   })
  }
}
</script>

<style scoped>
.h3title {
  font-size: 18px;
  line-height: 36px;
  /*border-bottom: 1px solid #f1f1f1;*/
  /*font-weight: normal;*/
  margin-bottom: 20px;
}
.mb20 {
  margin-bottom: 20px;
}
.user-head img {
  display: block;
  width: 110px;
  height: 130px;
  margin: 0;
  border: 1px solid #ddd;
}
.user-head p {
  width: 110px;
  font-size: 14px;
  text-align: center;
  padding: 0;
  margin: 0;
  line-height: 30px;
}
.item {
  font-size: 14px;
  color: #555;
  margin: 12px 0;
  overflow: hidden;
}
.item-label {
  width: 130px;
  float: left;
  display: inline-block;
  line-height: 24px;
  text-align: right;
}
.item-value {
  float: left;
  display: inline-block;
  line-height: 24px;
  padding-left: 10px;
  color: #999;
}
.userInfo-container {
  border-top: 1px solid #e8e8e8;
  font-size: 14px;
  overflow: hidden;
}
.row {
  padding: 0;
  border: 1px solid #e8e8e8;
  border-top: none;
  overflow: hidden;
  background-color: #fafafa;
}
.row-label {
  width: 90px;
  line-height: 84px;
  padding-left: 20px;
  font-weight: 700;
  color: #555;
}
.row-value {
  padding: 15px 20px;
  border-left: 1px solid #e8e8e8;
  margin-left: 110px;
  background-color: #fff;
}
</style>
